<%@ page import="org.gnomus.server.Context" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.List" %>
<%@ page import="com.google.gson.Gson" %>
<%@ page import="org.gnomus.server.C" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="java.util.LinkedHashMap" %>
<%
  Context ctx = Context.get();
  Map lesson = (Map) ctx.data.get("lesson");
  Map item = (Map) ctx.data.get("item");
  Map activity = (Map) ctx.data.get("activity");
  String subtype = (String) activity.get("subtype");
  List<Map> isotopes = (List<Map>) activity.get("isotope");
  Map<String, String> selected_isotopes = new LinkedHashMap<String, String>();
  if (isotopes != null) {
    for (Map isotope : isotopes) {
      String key = (String) isotope.get("value");
      if (C.VALID_ISOTOPES.containsKey(key)) {
        selected_isotopes.put(key, C.VALID_ISOTOPES.get(key));
      }
    }
  }
%>
<script type="text/javascript">
  $(document).ready(function() {
    DragAndDrop.edit(<%= new Gson().toJson(activity)%>, true);
  })
</script>
<div>
  <a class="f-right" href="/item/edit?id=<%= item.get("id") %>">
    Test this activity
  </a>
  <label for="subtype">
    Activity: Drag and Drop
  </label>
  <select id="subtype" name="subtype" onchange="DragAndDrop.changeSubtype(this.value)"
          style="font-family: Arial, Helvetica, sans-serif;">
    <%
      for (Map.Entry<String, String> me : C.DRAG_AND_DROP_SUBTYPES.entrySet()) {
    %>
    <option value="<%= me.getKey() %>"<%= me.getKey().equals(subtype) ? " selected=\"selected\"" : "" %>>
      <%= me.getValue() %>
    </option>
    <%
      }
    %>
  </select>
  <button class="d-none add-image" onclick="image.add(this, '<%= activity.get("id") %>', 0, 0);">
    Add image
  </button>
  <a class="d-none clear-isotope-selection"
     onclick="Activity.removeChildren('<%= activity.get("id") %>', 'isotope');
          alert('the page will reload.');window.location.reload(true);">
    clear selection
  </a>
  <button class="d-none select-periodic-square" onclick="">
    Select periodic square
  </button>
  <button class="d-none create-reaction" onclick="">
    Create reaction
  </button>
</div>
<div id="draggables">
  <%--
      draggable objects of specified subtype are inserted here via drag_and_drop.js
  --%>
</div>
<div id="isotopes" class="d-none a-center">
  <script type="text/javascript">
    $(document).ready(function () {
      var isotopes = $("canvas.isotope");
      for (var i = 0; i < isotopes.length; i++) {
        var a = i2a(isotopes[i].id);
        var ctx = isotopes[i].getContext("2d");
        var x = 0.5 * isotopes[i].width;
        var y = 0.5 * isotopes[i].height;
        var scale = 0.333 * isotopes[i].width;
        a.drawAtomicModel(ctx, x, y, scale, false, true);
      }
    });
  </script>
  <p class="large a-center">
    Available isotopes (click to select)
  </p>
  <table class="a-center" style="margin: 0 auto;">
    <tr>
    <%
      int i = 0;
      for (Map.Entry<String, String> me : C.VALID_ISOTOPES.entrySet()) {
    %>
      <td class="a-center">
        <canvas id="<%= me.getKey() %>" class="isotope" width="240" height="240"
                onclick="DragAndDrop.selectIsotope(this.id);"></canvas>
        <p>
          <%= me.getValue() %>
        </p>
      </td>
      <%
        i++;
        if (i % 3 == 0) {
      %>
    </tr>
    <tr>
      <%
        }
      %>
  <%
    }
  %>
    </tr>
  </table>
</div>
<div id="add_image" class="popup">
  <div class="popup-close"><a onclick="$('#add_image').hide()">&#215;</a></div>
  <div>
    <form id="upload_image" action="" method="post" enctype="multipart/form-data">
      <p class="xlarge a-center">Add Image</p>
      <div>
        <input type="file" name="file">
      </div>
      <input type="hidden" name="p_kind" value="activity">
      <input type="hidden" name="p_id" value="">
      <input type="hidden" name="b" value="<%= ctx.uri %>?<%= ctx.query %>">
      <input type="submit" value="Upload" class="f-right" />
    </form>
  </div>
</div>
<div id="drag_status">
  
</div>